<template>
  <div class="goods">
    <header>
      <h1>商品管理</h1>
      <el-button type="info" @click="$router.push('additem')"
        ><i class="el-icon-circle-plus"></i>添加商品</el-button
      >
    </header>
    <div class="tab">
      <el-select v-model="value" placeholder="请选择">
        
      </el-select>

      <el-input class="ipt" v-model="input" placeholder="关键词"></el-input>
      <el-button @click="search">查询</el-button>
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="id" width="60"> </el-table-column>
      <el-table-column label="信息">
        <template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
          <p>{{ scope.row.subtitle }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120"> </el-table-column>
      <el-table-column prop="status" label="状态" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ? "在售" : "已下架" }}</span>
          <el-button
            class="sxj"
            v-show="scope.row.status == 0"
            type="text"
            size="small"
            @click="but(scope.row)"
            >上架</el-button
          >
          <el-button
            class="sxj"
            v-show="scope.row.status == 1"
            type="text"
            size="small"
            @click="but1(scope.row)"
            >下架</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { goods, search } from "../http/index.js";
export default {
  data() {
    return {
      input: "",
      options: [
        {
          value: 1,
          label: "按商品ID查找",
        },
        {
          value: 2,
          label: "按商品名称查找",
        },
      ],
      value: "",
      list: [], //接受数据
      pageSize: 10,
      pageNum: 1,
      total: 0,
      type: "",
    };
  },
  methods: {
    goodsList() {
      goods({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        total: this.total,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.goodsList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.goodsList();
    },
    //搜索
    search() {},
    //下架按钮
    but(row) {
      console.log(row);
      row.status = 1;
    },
    //上架按钮
    but1(row) {
      console.log(row);
      row.status = 0;
    },
    //跳转商品详情
    handleClick(row) {
      this.$router.push("/deatil");
    },
  },
  created() {
    this.goodsList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.goods {
  box-sizing: border-box;
  padding: 0 20px 50px;
}
header {
  display: flex;
  width: 100%;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  h1 {
    font-size: 30px;
  }
}
.ipt {
  width: 200px;
}
.sxj {
  width: 40px;
  height: 25px;
  background-color: #f0ad4e;
  color: #fff;
  border-radius: 5px;
  line-height: 10px;
}
</style>
